<script setup>
import { useRouter } from "vue-router";
import axios from "axios";
import { ref, onMounted } from "vue";
import { ElDialog, ElTable, ElTableColumn, ElButton } from 'element-plus';
import 'element-plus/dist/index.css';

const router = useRouter();

function goTo(path) {
  router.push(path);
}


const newsList = ref([]);
const loadingNews = ref(false);
const newsError = ref("");

// 获取财经新闻
async function fetchNews() {
  loadingNews.value = true;
  newsError.value = "";
  try {
    const res = await axios.get("https://apis.tianapi.com/caijing/index", {
      params: {
        key: "75478596f45b632c8bbb9fb4c63fcdd5",
      },
    });
    if (res.data.code === 200 && res.data.result && res.data.result.newslist) {
      newsList.value = res.data.result.newslist.map((item, idx) => ({
        index: idx + 1,
        title: item.title,
        date: item.ctime,
        url: item.url,
      }));
    } else {
      newsError.value = res.data.msg || "获取新闻失败";
    }
  } catch (e) {
    newsError.value = "网络错误";
  } finally {
    loadingNews.value = false;
  }
}

// 考核人员名单数据
const assessors = ref([]);
const loadingAssessors = ref(false);
const assessorsError = ref("");

async function fetchAssessors() {
  loadingAssessors.value = true;
  assessorsError.value = "";
  try {
    const res = await axios.get("http://localhost:8080/home/getAllEvaluator");
    console.log(res);
    
    // 适配后端返回的对象，提取name和department.name
    let arr = [];
    if (res.data.code == 200) {
      if (Array.isArray(res.data)) {
        arr = res.data;
      } else if (res.data && Array.isArray(res.data.data)) {
        arr = res.data.data;
      } else {
        assessorsError.value = "暂无考核人员";
      }
      // 只取员工姓名和部门名称，并且只取前四个
      assessors.value = arr.slice(0, 4).map((item) => ({
        name: item.name,
        department: item.department && item.department.departmentName ? item.department.departmentName : "",
      }));
    }else{
      assessorsError.value = res.data.message || "获取考核人员失败";
    }
  } catch (e) {
    assessorsError.value = "获取考核人员失败";
  } finally {
    loadingAssessors.value = false;
  }
}

const noticeList = ref([]);
const loadingNotices = ref(false);
const noticeError = ref("");
const showIndicatorDialog = ref(false);
const indicatorList = ref([]);
const indicatorLoading = ref(false);
const indicatorError = ref("");
const currentPlanId = ref(null);

async function fetchNotices() {
  loadingNotices.value = true;
  noticeError.value = "";
  try {
    const res = await axios.get("http://localhost:8080/home/plan");
    if (res.data.code === 200 ) {
      noticeList.value = res.data.data.map(item => ({
        planId: item.planId,
        planName: item.planName,
        assessmentCycle: item.assessmentCycle,
        startDate: item.startDate,
        endDate: item.endDate,
      }));
    } else {
      noticeError.value = res.data.message || "获取公告失败";
    }
  } catch (e) {
    noticeError.value = "获取公告失败";
  } finally {
    loadingNotices.value = false;
  }
}

async function fetchIndicators(planId) {
  indicatorLoading.value = true;
  indicatorError.value = "";
  indicatorList.value = [];
  try {
    const res = await axios.get("http://localhost:8080/home/searchPlan/indicators", {
      params: { planId }
    });
    console.log(res);
    if (res.data.code === 200) {
      indicatorList.value = res.data.data.indicators;
    } else {
      indicatorError.value = res.data.message || "获取指标失败";
    }
  } catch (e) {
    indicatorError.value = "获取指标失败";
  } finally {
    indicatorLoading.value = false;
  }
}

function onNoticeClick(planId) {
  currentPlanId.value = planId;
  showIndicatorDialog.value = true;
  fetchIndicators(planId);
}

const searchText = ref("");
function search() {
  if (searchText.value.trim()) {
    router.push({ path: '/search', query: { q: searchText.value.trim() } });
  }
}

onMounted(() => {
  fetchNews();
  fetchAssessors();
  fetchNotices();
});
</script>

<template>
  <div class="bank-home-v2">
    <!-- 顶部横幅 -->
    <div class="bank-header-v2">
      <img
        class="bank-logo-v2"
        src="../../assets/picture/image.png"
        alt="银行logo"
      />
      <span class="bank-title-v2">黄氏银行业务平台</span>
      <input
        class="bank-search-v2"
        placeholder="输入检索内容"
        v-model="searchText"
        @keyup.enter="search"
      />
    </div>

    <!-- 上半部分：左大图，右财经新闻 -->
    <div class="bank-top-row">
      <div class="bank-top-left">
        <img
          class="bank-main-img"
          src="../../assets/picture/wallhaven-6ox1jl_2560x1600.png"
          alt="银行主题图片"
        />
        <div class="bank-img-caption">银行宣传图片</div>
      </div>
      <div class="bank-top-right">
        <div class="bank-news-header">
          <span class="bank-news-title">财经新闻</span>
        </div>
        <ul class="news-list-v2">
          <li v-if="loadingNews">加载中...</li>
          <li v-else-if="newsError">{{ newsError }}</li>
          <li v-else v-for="(item, idx) in newsList.slice(0, 4)" :key="idx">
            <span class="news-date-v2">{{ item.index }}</span>
            <a
              class="news-title-v2"
              :href="item.url"
              target="_blank"
              style="color: #2d5fa4; text-decoration: none; cursor: pointer"
              >{{ item.title }}</a
            >
          </li>
        </ul>
      </div>
    </div>

    <!-- 入口区块 -->
    <div class="bank-entry-row">
      <div class="bank-entry-bg">
        <button class="entry-btn-v2" @click="goTo('/login')">考核人员入口</button>
        <button class="entry-btn-v2" @click="goTo('/login')">管理员入口</button>
        <button class="entry-btn-v2" @click="goTo('/login')">普通员工入口</button>
      </div>
    </div>

    <!-- 下半部分：左公告，右部门考核人员 -->
    <div class="bank-bottom-row">
      <div class="bank-bottom-left">
        <div class="section-title-v2">银行公告</div>
        <ul class="notice-list-v2">
          <li v-if="loadingNotices">加载中...</li>
          <li v-else-if="noticeError">{{ noticeError }}</li>
          <li v-else-if="noticeList.length === 0">暂无公告</li>
          <li v-else v-for="(item) in noticeList" :key="item.planId" @click="onNoticeClick(item.planId)" style="cursor:pointer;">
            <span class="notice-title-v2">{{ item.planName }}</span>
            <span class="notice-date-v2">{{ item.startDate }}</span>
          </li>
        </ul>
      </div>
      <div class="bank-bottom-right">
        <div class="section-title-v2">考核人员名单</div>
        <div
          class="calendar-img-v2"
          style="max-height: 120px; overflow-y: auto; padding-right: 2px"
        >
          <table
            style="
              width: 100%;
              font-size: 1.08rem;
              color: #333;
              border-collapse: separate;
              table-layout: fixed;
            "
          >
            <thead>
              <tr>
                <th style="width: 50%; text-align: center">姓名</th>
                <th style="width: 50%; text-align: center">部门</th>
              </tr>
            </thead>
            <tbody>
              <tr v-if="loadingAssessors">
                <td colspan="2" style="text-align: center">加载中...</td>
              </tr>
              <tr v-else-if="assessorsError">
                <td colspan="2" style="text-align: center; color: #e55">
                  {{ assessorsError }}
                </td>
              </tr>
              <tr v-else v-for="(item, idx) in assessors" :key="idx">
                <td style="text-align: center">{{ item.name }}</td>
                <td style="text-align: center">{{ item.department }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="showIndicatorDialog" title="考核指标" width="700px" :close-on-click-modal="false">
    <template #default>
      <div v-if="indicatorLoading">加载中...</div>
      <div v-else-if="indicatorError" style="color:red;">{{ indicatorError }}</div>
      <el-table v-else :data="indicatorList" style="width: 100%">
        <el-table-column prop="indicatorId" label="编号" width="100" />
        <el-table-column prop="indicatorName" label="名称" width="180" />
        <el-table-column prop="indicatorType" label="类型" width="120" />
        <el-table-column prop="scoringStandard" label="评分标准" />
        <el-table-column prop="weight" label="权重" width="100" />
      </el-table>
    </template>
    <template #footer>
      <el-button @click="showIndicatorDialog = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.bank-home-v2 {
  min-height: 100vh;
  background: #e3eefc;
  font-family: "Microsoft YaHei", Arial, sans-serif;
}
.bank-header-v2 {
  display: flex;
  align-items: center;
  background: #6ea8e5;
  color: #fff;
  padding: 0.5rem 2rem;
  height: 70px;
}
.bank-logo-v2 {
  width: 54px;
  height: 54px;
  margin-right: 1.2rem;
}
.bank-title-v2 {
  font-size: 2.3rem;
  font-weight: bold;
  letter-spacing: 2px;
  flex: 1;
}
.bank-search-v2 {
  border: none;
  border-radius: 0;
  padding: 0.6rem 1.2rem;
  font-size: 1.1rem;
  outline: none;
  width: 240px;
}
.bank-top-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3rem;
  margin: 2.8rem 0 1.6rem 0;
}
.bank-top-left {
  width: 660px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bank-main-img {
  width: 100%;
  height: 290px;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 2px 12px rgba(45, 95, 164, 0.1);
}
.bank-img-caption {
  font-size: 1.08rem;
  color: #666;
  margin-top: 0.7rem;
  text-align: center;
}
.bank-top-right {
  width: 400px;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 2px 12px rgba(45, 95, 164, 0.1);
  padding: 1.6rem 1.6rem 1.1rem 1.6rem;
  display: flex;
  flex-direction: column;
}
.bank-news-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
}
.bank-news-title {
  font-size: 1.22rem;
  font-weight: bold;
  color: #2d5fa4;
}
.news-list-v2 {
  list-style: none;
  padding: 0;
  margin: 0;
}
.news-list-v2 li {
  display: flex;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 1.13rem;
}
.news-list-v2 li:last-child {
  border-bottom: none;
}
.news-date-v2 {
  background: #2d5fa4;
  color: #fff;
  border-radius: 0;
  padding: 0.25rem 0.9rem;
  margin-right: 0.9rem;
  font-size: 1.08rem;
}
.news-title-v2 {
  color: #333;
}
.bank-entry-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 2.1rem 0 2.7rem 0;
}
.bank-entry-bg {
  width: 88%;
  background: #e3eefc;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  padding: 1.4rem 0;
  box-shadow: 0 2px 10px rgba(45, 95, 164, 0.08);
}
.entry-btn-v2 {
  padding: 1.15rem 2.8rem;
  font-size: 1.22rem;
  border: none;
  border-radius: 0;
  background: #2d5fa4;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
  font-weight: bold;
  letter-spacing: 1px;
}
.entry-btn-v2:hover {
  background: #1a3e6e;
}
.bank-bottom-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 3rem;
  margin-bottom: 2.8rem;
}
.bank-bottom-left {
  width: 660px;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 2px 12px rgba(45, 95, 164, 0.1);
  padding: 1.6rem 1.6rem 1.1rem 1.6rem;
}
.section-title-v2 {
  font-size: 1.22rem;
  font-weight: bold;
  color: #2d5fa4;
  margin-bottom: 1.2rem;
}
.notice-list-v2 {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px; /* 调整最大高度，超出可滚动 */
  overflow-y: auto;   /* 超出出现滚动条 */
}
.notice-list-v2::-webkit-scrollbar {
  width: 8px;
  background: #f0f0f0;
}
.notice-list-v2::-webkit-scrollbar-thumb {
  background: #b3c6e0;
  border-radius: 4px;
}
.notice-list-v2 li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 1.13rem;
}
.notice-list-v2 li:last-child {
  border-bottom: none;
}
.notice-title-v2 {
  color: #333;
}
.notice-date-v2 {
  color: #aaa;
  font-size: 1.08rem;
}
.bank-bottom-right {
  width: 220px;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 2px 12px rgba(45, 95, 164, 0.1);
  padding: 1.6rem 1.6rem 1.1rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.calendar-img-v2 {
  max-height: 220px; /* 调大高度，便于下拉 */
  min-height: 120px;
  overflow-y: auto;
  padding-right: 2px;
  width: 100%;
}
.calendar-img-v2 img {
  width: 95%;
  max-width: 220px;
  min-width: 220px;
  margin-bottom: 0.7rem;
}
</style>
